<template>
  <!-- 头部开始 -->
  <div class="header flex align-center">
    <div class="header-left-bar">
      <img src="@/assets/images/header-l.png" alt="" srcset="">
    </div>
    <div class="header-logo">
      <img src="@/assets/images/header_logo_student.png" v-if="isStudent" alt="" srcset="">
      <img src="@/assets/images/header_logo_grade.png" v-else alt="" srcset="">
    </div>
    <div class="header-right-bar">
      <img src="@/assets/images/header-r.png" alt="" srcset="">
    </div>
  </div>


  <!-- 主要背景 -->
  <div class="main-bg"></div>

  <div class="main-section flex justify-center align-center">
    <div class="main-section-slide">
      <img src="./assets/images/main_slide_title.png" alt="" srcset="">
    </div>

    <router-view></router-view>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { onMounted } from 'vue';
import { ref } from 'vue';
const router = useRoute();
const isStudent = ref(false);
onMounted(() => {
  isStudent.value = router.name === 'Student';
})
</script>

<style scoped lang="scss">
.header{
  padding-top: 32px;
  &-left-bar{
    // width: 295px;
    // height: 13px;
    // background: #E76C00;
  }
  &-logo{
    margin: 0 15px;
  }
}
.main-bg{
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/main_bg.png') no-repeat center center;
  background-size: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: -1;
}
</style>


<style lang="scss">
.main-section{
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 150px;
  &-slide{
    width: 230px;
    position: relative;
    top: 40px;
  }

  &-menu{
    width: 300px;
    height: 690px;
    border: 10px solid #E76C00;
    border-radius: 30px;
    margin-right: 28px;
    margin-left: 54px;
    background-color: #fff;
  }

  &-display{
    width: 1120px;
    height:690px;
    border: 10px solid #E76C00;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    // background-color: #fff;
  }
}
</style>
